<template>
  <div class='my container'>
    <!-- container 公共类  在src/assets/css/common.css里面有写 规定-->
    <header>
      <!-- {{userInfo}} -->
      <!-- 这里没登录，没数据的时候就是空数组{} -->
      <div
        class='user-info'
        v-if='loginStatus'
      >
        <img
          :src="userInfo.imgUrl"
          alt=""
        >
        <span>{{userInfo.nickName}}</span>
      </div>
      <div
        v-else
        class='login'
        @click='goLogin'
      >登录/注册</div>
    </header>
    <section>
      <ul>
        <li @click="goPath">地址管理</li>
        <!-- 或者可以设置成，没有登录的时候弹框没有登陆 -->
        <li
          v-if='loginStatus'
          @click='loginOut'
        >退出登录</li>
        <!-- 后续加提示信息--是否退出登录 -->
      </ul>
    </section>
    <Tabbar></Tabbar>
  </div>
</template>

<script>
//import Vuex from "vuex";
import { mapState } from "vuex"; //查询这里为什么需要{} 通过vuex来读取
import { mapMutations } from "vuex"; //没有引入则 ReferenceError: mapMutations is not defined  500
import Tabbar from "../components/common/Tabbar.vue";
export default {
  name: "My",
  components: {
    Tabbar,
  },
  /*   data() {
    return {
      loginStatus: "",
    };
  }, */
  /*   computed: {
    //关乎于vuex  //弄懂
    ...mapState({
      list: (state) => state.user.list,
    }),
  }, */ //这里是从vuex里面取数据

  /*   
  //这里写错了 繁忙教材
  computed: {
    loginStatus: (state) => state.user.loginStatus,
    ...mapState({
      userInfo: (state) => state.user.userInfo,
    }),
  }, */

  computed: {
    ...mapState({
      loginStatus: (state) => state.user.loginStatus,
      //这里是从vuex里面取数据  不用在data里定义loginStatus
      userInfo: (state) => state.user.userInfo,
    }),
  },

  methods: {
    ...mapMutations(["loginOut"]), //退出 记住要三个（点点点...）
    //去登录页面
    goLogin() {
      this.$router.push("/login"); //和namexiangdeng
    },
    //去地址管理页面
    goPath() {
      this.$router.push("/path");
    },
  },
};
</script>
<style scoped lang='scss'>
header {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 8.266666rem;
  //background-color: #b0352f;
  background-color: #f67a71;
  .login {
    padding: 0.16rem 0.4rem;
    font-size: 0.426666rem;
    color: #fff;
    background-color: #f6ab32;
    border-radius: 6px;
  }
  .user-info {
    padding: 20px 0px 0px 0px;
    display: flex;
    flex-direction: column;
    width: 5.3333rem;
    height: 5.3333rem;
    justify-content: center; //在div里面居中了
    img {
      border-radius: 25%;
    }
    span {
      line-height: 1.3333rem;
      text-align: center;
      font-size: 35px;
    }
  }
}

section {
  flex: 1;
  overflow: hidden;
  ul li {
    padding: 0.4rem;
    font-size: 0.426666rem;
  }
}
</style>

